<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <!-- vonce 内容只会渲染一次 -->
    <div id="hello" v-once>{{message}}</div>
    <script src="../vue.js"></script>
    <script>
        const vue01 = new Vue({
            el: '#hello',
            data: {
                message: 'hello vuejs',
            }
        })
        setTimeout(() => {
            vue01.message = "2";
        }, 1000);
    </script>

    <!-- 显示html代码 -->
    <div id="hello2" v-html="message">{{message}}</div>
    <script src="../vue.js"></script>
    <script>
        const vue02 = new Vue({
            el: '#hello2',
            data: {
                message: '<h1>hello2 vuejs</h1>',
            }
        })
    </script>

    <!-- 将文本显示在dom中，没有mustache灵活，dom原来的内容会被覆盖 -->
    <div id="hello3">
        <p>{{message}} 这里是其他内容</p>
        <p v-text="message2">这里是其他内容</p>
    </div>
    <script src="../vue.js"></script>
    <script>
        const vue03 = new Vue({ 
            el: '#hello3',
            data: {
                message: 'hello3 vuejs',
                message2:'hello4 vuejs'
            }
        })
    </script>

    <!-- 跳过元素和子元素的编译过程 显示原本的mustache语法 -->
    <div id="hello5" v-pre>{{message}}</div>
    <script src="../vue.js"></script>
    <script>
        const vue05 = new Vue({
            el: '#hello5',
            data: {
                message: 'hello vuejs',
            }
        })
    </script>

    <!-- js没有进行渲染的时候，会显示未编译的mustache语法，不想这么做，用vcloak 还要设置css属性才会隐藏 -->
    <div id="hello6" v-cloak>{{message}}</div>
    <script src="../vue.js"></script>
    <script>
       setTimeout(() => {
        const vue06 = new Vue({
            el: '#hello6',
            data: {
                message: 'hello vuejs',
            }
        })
       }, 5000);
    </script>
   
</body>

</html>